const { defineConfig } = require('@vue/cli-service')
const path = require('path')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

const resolve = (dir) => path.join(__dirname, dir)

module.exports = defineConfig({
  // 基本路径
  publicPath: '/',
  assetsDir: 'static',
  // eslint-loader 是否在保存的时候检查
  lintOnSave: false,
  runtimeCompiler: true, // 关键点在这
  filenameHashing: true,
  // 调整内部的 webpack 配置。
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
      .set('types', resolve('src/types'))
      .set('public', resolve('public'))
      .set('vue-i18n', 'vue-i18n/dist/vue-i18n.cjs.js')
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // 忽略自定义标签警告 vue3 app.config.compilerOptions.isCustomElement 配置有问题
          isCustomElement: (tag) => {
            return ['xml', 'block', 'mutation', 'category'].includes(tag)
          },
        },
      }))
    // set svg-sprite-loader
    config.module.rule('svg').exclude.add(resolve('src/assets/icons')).end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end()
  },
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // css相关配置
  css: {
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      scss: {
        additionalData: `@use "@/styles/elements/index.scss" as *;`,
      },
      sass: {
        implementation: require('sass'), // This line must in sass option
      },
      css: {
        modules: {
          auto: () => false,
        },
      },
    },
  },
  // webpack-dev-server 相关配置
  devServer: {
    /* 自动打开浏览器 */
    host: 'localhost',
    port: 9000,
    open: true,
    https: false,
    allowedHosts: 'auto',
    hot: true,
    // hot: 'only',
    /* 使用代理 */
    proxy: {
      '/dev-api': {
        /* 目标代理服务器地址 */
        target: process.env.VUE_APP_BASE_API,
        /* 允许跨域 */
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/dev-api': '/',
        },
      },
    },
  },
  configureWebpack: (config) => {
    // 为生产环境修改配置...
    if (process.env.NODE_ENV === 'production') {
      // 生产环境去除console.log
      config.optimization.minimizer[0].options.minimizer.options.compress = Object.assign(
        config.optimization.minimizer[0].options.minimizer.options.compress,
        {
          drop_console: true,
        },
      )
      config.mode = 'production'
      // 打包文件大小配置
      config.performance = {
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000,
      }
    }
    return {
      module: {
        rules: [
          {
            test: /\.mjs$/,
            include: /node_modules/,
            type: 'javascript/auto',
          },
        ],
      },
      plugins: [
        new CompressionWebpackPlugin({
          filename: '[path][base].gzip',
          algorithm: 'gzip',
          test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
          threshold: 10240, //内容超过10KB进行压缩
          minRatio: 0.8,
        }),
      ],
      externals: [
        {
          './cptable': 'var cptable',
        },
      ],
    }
  },
  // 第三方插件配置
  pluginOptions: {},
})
